import React, { Component } from 'react'
import "./ShoppingMall.scss"
import SearchInput from "../searchInput/SearchInput"
import MllNav from './mallNav/MallNav'
import ProductShow from './productShow/ProductShow'
import { withRouter } from "react-router-dom"

// 引入图片
import Imgs from "../../assets/images/index-top.png"
import Like from "../../assets/images/like.webp"

class ShoppingMall extends Component {
    // 跳转 前往查看
    goToView = () => {
        this.props.history.push("/download")
    }

    render() {
        return (
            <div className="mgj-mall">
                {/* 通知栏开始 */}
                <div className="mall-notificationBar">
                    <div className="notificationBar-left">
                        <img src={Imgs} alt=""/>
                        <div className="notificationBar-text">
                            <p className='text1'>蘑菇街 总有高手帮你挑</p>
                            <div className="text2">
                            <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <span>超过2亿用户已下载</span>
                            </div>
                        </div>
                    </div>
                    <div className="notificationBar-right" onClick={this.goToView}>前往查看</div>
                </div>
                {/* 通知栏结束 */}
                {/* 搜索栏开始 */}
                <div className="mgj-mall-searshInput">
                    <SearchInput/>
                </div>
                {/* 搜索栏结束 */}
                {/* 导航栏开始 */}
                <div className="mgj-mall-nav">
                    <MllNav/>
                </div>
                {/* 导航栏结束 */}
                {/* 猜你喜欢开始 */}
                <div className="mgj-mall-like">
                    <img src={Like} alt=""/>
                </div>
                {/* 猜你喜欢结束 */}
                {/* 商品展示开始 */}
                <div className="mgj-mall-productShow">
                    <ProductShow/>
                </div>
                {/* 商品展示结束 */}
            </div>
        )
    }
}

export default withRouter(ShoppingMall )